<!-- top开始 -->
	<div class="header">
		<div class="header_top">
			<div class="logo">
				<a href="../index.html" title="湖南工程学院计算机与通信学院">
					<img src="../images/logo.png">
				</a>
			</div>
		</div>
		<!-- 导航栏开始 -->
		<div class="nav_box">
			<div class="nav_main">
				<ul id="nav">
					<li class="main_level">
						<a href="../index.html">网站首页</a>
						<ul id="sub_dh">
							
						</ul>
					</li>
					<li class="main_level">
						<a href="">关于我们</a>
						<ul id="sub_dh">
							<li class="dh1"><a href="">学院简介</a></li>
							<li class="dh2"><a href="">学院领导</a></li>
							<li class="dh3"><a href="">师资队伍</a></li>
							<li class="dh4"><a href="">学院荣誉</a></li>
							<li class="dh5"><a href="">机构设置</a></li>
						</ul>
					</li>
					<li class="main_level">
						<a href="">实验实训</a>
						<ul id="sub_dh">
							<li class="dh1"><a href="">科研设施</a></li>
							<li class="dh2"><a href="">实验室</a></li>
							<li class="dh3"><a href="">实习基地</a></li>
							<li class="dh4"><a href="">学生实训室</a></li>
							<li class="dh5"><a href="">科研|实验|实训活动</a></li>
						</ul>
					</li>
					<li class="main_level">
						<a href="">教务教学</a>
					</li>
					<li class="main_level">
						<a href="">科学研究</a>
					</li>
					<li class="main_level">
						<a href="">学生工作</a>
						<ul id="sub_dh">
							<li class="dh1"><a href="">学工概况</a></li>
							<li class="dh2"><a href="">奖助贷勤</a></li>
							<li class="dh3"><a href="">学生社团</a></li>
							<li class="dh4"><a href="">就业指导</a></li>
							<li class="dh5"><a href="">科技创新</a></li>
							<li class="dh6"><a href="">团学活动</a></li>
						</ul>
					</li>
					<li class="main_level">
						<a href="">评建工作</a>
						<ul id="sub_dh">
							<li class="dh1"><a href="">评建工作</a></li>
							<li class="dh2"><a href="">新闻动态</a></li>
							<li class="dh3"><a href="">通知公告</a></li>
						</ul>
					</li>
					<li class="main_level">
						<a href="">在线咨询</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 导航栏结束 -->
	</div>
	<!-- top结束 -->
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
			list-style: none;
			transition: 0.5s;
			-moz-transition: 0.5s;
			-webkit-transition: 0.5s;
		}
		a{
			text-decoration: none;
		}
		a:hover,ul li a:hover,dl dt a:hover{
			color: #f00;
			transition: all 0.3s;
			-webkit-transition: all 0.3s;
			text-decoration: none;
		}
		img{
			border: 0;
		}
		.header{
			width: 100%;
			height: 150px;
			background: url(../images/header-background.png);
		}
		.header .header_top{
			margin: 0 auto;
			height: 100px;
			width: 1200px;
		}
		.logo{
			width: 400px;
			margin-top: 20px;
			float: left;
		}
		/*导航菜单开始*/
		.nav_box{
			width: 100%;
			position: absolute;
		}
		.nav_main{
			width: 1200px;
			height: 44px;
			margin: 0 auto;
			z-index: 1000;
		}
		#nav{
			width: 1200px;
			height: 50px;
			float: left;
			-webkit-animation: nav_box 1s;
			animation: nav_box 1s;
			position:relative;
		}
		#nav .main_level{
			float: left;
			width: 150px;
			font-size: 16px;
			position:relative;
		}
		#nav .main_level a{
			color: #fff;
			text-align: center;
			line-height: 50px;
			height: 50px;
			width: 100%;
			display: block;
		}
		#nav :hover a{
			color: #fff;
			background: #2a63b9;
			opacity: 0.8;
			filter: alpha(opacity=80);
			-moz-opacity:0.8;
			-khtml-opacity: 0.8;
		}
		#nav .main_level ul{
			display: none;
			z-index: 909;
			width: 150px;
			position: absolute;
			top: 50px;
			list-style: none;
			/*background: url(../images/tm.png) repeat;*/
		}
		#nav .main_level:hover ul{
			display: block;
		}
		#nav .main_level ul li{;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #2a63b9;
			opacity: 0.8;
			filter: alpha(opacity=80);
			-moz-opacity: 0.8;
			-khtml-opacity: 0.8;
			margin-bottom: 1px;
		}

		#nav .main_level ul li a{
			height: 40px;
			line-height: 40px;
			color: #fff;
			font-size: 16px;
			font-weight: normal;
			display: block;
			width: 100%;
		}
		#nav .main_level ul li a:hover{
			color: #fff;
			width: 100%;
			height: 40px;
			line-height: 40px;
			font-weight: 100;
			background: #214782;
		}
		/*导航菜单-二级菜单*/
		.dh1{
			display: block;
			animation: dh_li 0.8s;
			-webkit-animation: dh_li 0.8s;
		}
		.dh2{
			display: block;
			animation: dh_li 1s;
			-webkit-animation: dh_li 1s;
		}
		.dh3{
			display: block;
			animation: dh_li 1.2s;
			-webkit-animation: dh_li 1.2s;
		}
		.dh4{
			display: block;
			animation: dh_li 1.4s;
			-webkit-animation: dh_li 1.4s;
		}
		.dh5{
			display: block;
			animation: dh_li 1.6s;
			-webkit-animation: dh_li 1.6s;
		}
		.dh6{
			display: block;
			animation: dh_li 1.8s;
			-webkit-animation: dh_li 1.8s;
		}
		.dh_er{
			position: relative;
		}
		/*@keyframes nav_box
		{
			from {left:-50px;}
			to {left:0px;}
		}*/
		@keyframes nav_box {  
		0%{ 
			opacity: 0;
			transform:translate(-50px,0px); 
			}
		}
		@-webkit-keyframes nav_box {  
		0%{ 
			opacity: 0;
			transform:translate(-50px,0px); 
			}
		}
		/*Safari and Chrome*/
		/*@-webkit-keyframes nav_box  
		{
			from {left:-50px;}
			to {left:0px;}
		}*/
		@-webkit-keyframes dh_li {  
		0%{ 
			opacity: 0;
			-webkit-transform:rotateX(-50deg)rotatey(135deg)rotateZ(15deg) translate(0px,20px);
			}
		}
		@keyframes dh_li { 
		0%{
			opacity: 0;
			transform:rotateX(-50deg)rotatey(135deg)rotateZ(15deg) translate(0px,20px);
			}
		}
		/*导航菜单结束*/
	</style>